<template>
	<view>
		<u-navbar title="安全支付" back-icon-size='44' :background="background" :border-bottom='false'
			:custom-back="customBack"></u-navbar>
		<view class="container">
			<view class="priceBox">
				<view class="price">
					<text style="font-size: 28rpx;">¥</text>1000
				</view>
				<view class="station">
					<text>深圳北 - 长沙南</text>
					<text style="color:#3587F7;margin-left: 12rpx;" @click="orderShow=true">详情</text>
					<u-icon name="arrow-down" color="#3587F7" size="26"></u-icon>
				</view>
			</view>
		</view>
		<view class="payBox">
			<view class="pay-li">
				<view class="left">
					<image src="../../../static/imgs/weixinzf.png" mode=""></image>
					<text>微信</text>
				</view>
				<view class="right">
					<u-checkbox v-model="checked" shape="circle"></u-checkbox>
				</view>
			</view>
			<view class="pay-li">
				<view class="left">
					<image src="../../../static/imgs/zhifubaozf.png" mode=""></image>
					<text>支付宝</text>
				</view>
				<view class="right">
					<u-checkbox v-model="checked" shape="circle"></u-checkbox>
				</view>
			</view>
		</view>
		
		<view class="payBtn">
			<view class="btn">
				支付
			</view>
		</view>
		
		<u-popup v-model="orderShow" mode="center" border-radius="16" :mask-close-able='false'>
			<view class="orderInfo">
				<view class="step-item">
					<view class="top">
						第一程: 深圳北 - 长沙南
					</view>
					<view class="bot">
						2021-02-10 周三 08:46出发 二等座
					</view>
				</view>
				<view class="step-item">
					<view class="top">
						第二程: 长沙南 - 襄阳北
					</view>
					<view class="bot">
						2021-02-10 周三 08:46出发 二等座
					</view>
				</view>
				<view class="line"></view>
				<view class="step-item">
					<view class="top">
						费用明细
					</view>
					<view class="bot">
						第1程票价 ¥388.6×1
					</view>
					<view class="bot">
						第2程票价 ¥77×1
					</view>
				</view>
				
				<view class="step-item">
					<view class="top">
						乘车人
					</view>
					<view class="bot">
						小桌子 身份证: 789653**************23
					</view>
					<view class="bot">
						小桌子 身份证: 789653**************23
					</view>
				</view>
				
				<view class="step-item">
					<view class="top">
						联系手机
					</view>
					<view class="bot">
						86-156****0236
					</view>
				</view>
				
				<view class="total">
					<view class="left">
						<text class="tit">应付总额</text>
						<text class="price">¥1010</text>
					</view>
					<view class="right" @click="orderShow=false">
						<text>收起</text>
						<u-icon name="arrow-up" color="#3587F7" size="28"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal v-model="showBack" :content="content" :show-title='false' show-cancel-button confirm-text='确认离开' cancel-text='继续支付' @confirm="confirmFn"></u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'您的订单尚未完成支付，确定要离开？',
				showBack:false,
				orderShow:false,
				checked:false,
				background: {
					backgroundColor: '#F2F2F7'
				}
			}
		},
		methods: {
			confirmFn(){
				uni.navigateBack({
					delta:1
				})
			},
			customBack() {
				this.showBack =true
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.container {
		background-color: #F2F2F7;
		.priceBox {
			width: 100%;
			height: auto;
			padding: 70rpx 0  80rpx;
			.price {
				width: 100%;
				font-size: 64rpx;
				font-family: Arial;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}
			.station {
				width: 100%;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
		}
	}

	.payBox {
		margin-top: -20rpx;
		width: 100%;
		height: auto;
		border-radius: 24rpx 24rpx 0px 0px;
		background-color: #FFFFFF;
		padding: 0 28rpx;
		.pay-li {
			width: 100%;
			height: 128rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F2F7;
			.left {
				display: flex;
				align-items: center;
				image {
					width: 44rpx;
					height: 44rpx;
				}
				text {
					font-size: 32rpx;
					font-family: Alibaba Sans;
					font-weight: 400;
					color: #333333;
					margin-left: 8rpx;
				}
			}
		}
	}
	
	.payBtn {
		width: 100%;
		height: 136rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 2rpx solid #F2F2F7;
		.btn {
			width: 694rpx;
			height: 80rpx;
			background: linear-gradient(180deg, #FEA837 0%, #FF7700 100%);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 80rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	
	.orderInfo {
		width: 694rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding:24rpx 24rpx 0 24rpx;
		.step-item {
			margin-bottom: 28rpx;
			.top {
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}
			.bot {
				margin: 8rpx 0;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #666666;
			}
		}
	
		.line {
			width: 100%;
			height: 0px;
			border: 2rpx solid #F2F2F7;
			margin-bottom: 28rpx;
		}
		
		.total {
			width: 100%;
			height: 86rpx;
			border-top:2rpx solid #F2F2F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				.tit{
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #666666;
				}
				.price {
					font-size: 32rpx;
					font-family: Arial;
					font-weight: 400;
					color: #F57426;
					margin-left: 10rpx;
				}
			}
			.right {
				text {
					font-size: 28rpx;
					font-family: Arial;
					font-weight: 400;
					color: #3587F7;
					margin-right: 4rpx;
				}
			}
		}
	}
	
	/deep/ .u-checkbox__label {
		margin-right: 0rpx !important;
	}
</style>
